<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>新增商家</title>
    <script src="${ctx}/static/js/jquery/jquery.validate.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">


    <style type="text/css">
        input {
            border: #9a9999 0px solid;
            BORDER-BOTTOM: #9a9999 1px solid;
            width: 100%;
            height: 43px;
            line-height: 30px;
            vertical-align:middle;
            BACKGROUND-COLOR: transparent;
        }

        .ui-div-type{
            //height: 43px;
            width:40%
        }
        .select-type{
            height: 43px;
        }
        .error{
            color:red;
            font-size: 10px;
            padding-left: 30px;
        }
        .text_alert{
            border-color: #FF4500 !important;
            border-style: solid  !important;
            border-top-width: 0px  !important;
            border-right-width: 0px  !important;
            border-bottom-width: 1px  !important;
            border-left-width: 0px  !important;
        }

    </style>
</head>
<body ontouchstart="">
<section class="ui-container">
    <div style="margin:0 auto;width:90%;padding-top:50px">
        <div class="ui-whitespace">
            <p class="ui-txt-info" style="padding-bottom: 3%">${title}</p>
        </div>

        <div class="ui-form ui-border-t">
            <form action="#" id="formShopInfo">
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</label>
                    <input type="text" id="name" value="${parkingShop.name}" class="required"/>
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label>商铺位置:</label>
                    <input type="text" id="location"  value="${parkingShop.location}"/>
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label>商主姓名:</label>
                    <input type="text" id="ownerName"  value="${parkingShop.ownerName}"/>
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</label>
                    <input type="text" id="phone"  value="${parkingShop.phone}"  class="{required:true}"/>
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label style="width: 25%">商家类别:</label>
                    <div class="ui-select ui-div-type">
                        <select class="select-type" id="shopType">
                        </select>
                    </div>
                </div>
            </form>
        </div>

        <div>
            <p class="error" id="showMsgP"></p>
        </div>

        <div style="padding-top: 30px;" align="center">
            <button type="button" class="ui-btn ui-btn-primary" style="width: 100%;height: 40px"
                    id="btnConfirm">${btnConfirmHtml}
            </button>
            <button type="button" class="ui-btn" style="margin-top:10px; width: 100%; height: 40px"
                    id="btnCancel">取消
            </button>
        </div>

    </div>
</section>
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>

    var paramObj = {
        "addNewShopParams": "${addNewShopParams}"
    };

    var canSubmit = true;
    $(function () {
        $.queryCode($("#shopType"),"shopType");

        $("#formShopInfo").validate({
            submitHandler:function(form){
                console.log("--------");
            },
            messages:{
                name:{
                    required:"*"
                }
            }
        });

        $("#btnCancel").click(function(){
            history.back();
        });

        $("#btnConfirm").click(function () {
            if (canSubmit) {
                if (!$("#name").val()) {
                    showTips("warn", "请输入您的名称");
                    $("#name").addClass("text_alert");
                    return;
                }

                if (!$("#location").val()) {
                    showTips("warn", "请输入您的商铺位置");
                    $("#location").addClass("text_alert");
                    return;
                }
                if (!$("#ownerName").val()) {
                    showTips("warn", "请输入您的商户姓名");
                    $("#ownerName").addClass("text_alert");
                    return;
                }
                if (!$("#phone").val()) {
                    showTips("warn", "请输入您的手机号码");
                    $("#phone").addClass("text_alert");
                    return;
                }
                if(!isPhoneNo($("#phone").val())){
                    showTips("warn", "请输入正确的手机号码");
                    $("#phone").addClass("text_alert");
                    return;
                }

                if (!$("#shopType").val()) {
                    showTips("warn", "请选择您的商户类型");
                    $("#shopType").addClass("text_alert");
                    return;
                }

                var paraObj = {
                    "params": paramObj.addNewShopParams,
                    "name": $("#name").val(),
                    "location": $("#location").val(),
                    "ownerName": $("#ownerName").val(),
                    "phone": $("#phone").val(),
                    "type": $("#shopType").val()
                };
                canSubmit = false;
                $.post("${action}", paraObj, function (obj) {
                    console.log(obj);
                    if (obj.result) {
                        showTips("info", "新增成功");
                        var hrefUrl = "${action}?params=" + obj.data;
                        window.location.href = hrefUrl;
                    } else {
                        $("#showMsgP").html(obj.msg);
                    }
                    canSubmit = true;
                });
            }
        });
    });


</script>
</html>